<template>
  <view class="category-container">
    <!-- 左侧一级分类 -->
    <scroll-view class="left-category" scroll-y>
      <view
          v-for="(item, index) in categories"
          :key="item.id"
          class="left-item"
          :class="{ active: currentCategory === index }"
          @tap="switchCategory(index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>

    <!-- 右侧二级分类 -->
    <scroll-view class="right-category" scroll-y>
      <view class="subcategory-grid">
        <view
            v-for="subItem in currentSubcategories"
            :key="subItem.id"
            class="subcategory-item"
            @tap="goToSubcategory(subItem)"
        >
          <image class="subcategory-img" :src="subItem.img" mode="aspectFill"></image>
          <text class="subcategory-name">{{ subItem.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 0, // 当前选中的一级分类索引
      categories: [
        {
          id: 1,
          name: '热门推荐',
          children: [
            { id: 101, name: '新品上市', img: '/static/icon/软装.png' },
            { id: 102, name: '热销排行', img: '/static/icon/软装1.png' },
            { id: 103, name: '限时特惠', img: '/static/icon/软装1.png' },
            { id: 103, name: '限时特惠', img: '/static/icon/软装1.png' },
            { id: 103, name: '限时特惠', img: '/static/icon/软装.png' },
            { id: 103, name: '限时特惠', img: '/static/icon/软装.png' },
          ]
        },
        {
          id: 2,
          name: '手机数码',
          children: [
            { id: 201, name: '智能手机', img: '/static/images/phone.jpg' },
            { id: 202, name: '平板电脑', img: '/static/images/tablet.jpg' },
            { id: 203, name: '笔记本电脑', img: '/static/images/laptop.jpg' },
            { id: 204, name: '耳机音响', img: '/static/images/earphone.jpg' },
            { id: 205, name: '智能手表', img: '/static/images/watch.jpg' },
            { id: 206, name: '摄影摄像', img: '/static/images/camera.jpg' }
          ]
        },
        {
          id: 3,
          name: '家用电器',
          children: [
            { id: 301, name: '电视', img: '/static/images/tv.jpg' },
            { id: 302, name: '空调', img: '/static/images/ac.jpg' },
            { id: 303, name: '冰箱', img: '/static/images/fridge.jpg' },
            { id: 304, name: '洗衣机', img: '/static/images/washer.jpg' },
            { id: 305, name: '厨房电器', img: '/static/images/kitchen.jpg' },
            { id: 306, name: '生活电器', img: '/static/images/life.jpg' }
          ]
        },
        {
          id: 4,
          name: '服装鞋包',
          children: [
            { id: 401, name: '男装', img: '/static/images/men.jpg' },
            { id: 402, name: '女装', img: '/static/images/women.jpg' },
            { id: 403, name: '童装', img: '/static/images/kids.jpg' },
            { id: 404, name: '鞋靴', img: '/static/images/shoes.jpg' },
            { id: 405, name: '箱包', img: '/static/images/bag.jpg' },
            { id: 406, name: '配饰', img: '/static/images/accessory.jpg' }
          ]
        },
        {
          id: 5,
          name: '美妆护肤',
          children: [
            { id: 501, name: '面部护肤', img: '/static/images/face.jpg' },
            { id: 502, name: '彩妆', img: '/static/images/makeup.jpg' },
            { id: 503, name: '香水', img: '/static/images/perfume.jpg' },
            { id: 504, name: '男士护理', img: '/static/images/men-care.jpg' },
            { id: 505, name: '美发护发', img: '/static/images/hair.jpg' },
            { id: 506, name: '身体护理', img: '/static/images/body.jpg' }
          ]
        },
        {
          id: 6,
          name: '食品生鲜',
          children: [
            { id: 601, name: '休闲零食', img: '/static/images/snack.jpg' },
            { id: 602, name: '生鲜水果', img: '/static/images/fruit.jpg' },
            { id: 603, name: '粮油调味', img: '/static/images/oil.jpg' },
            { id: 604, name: '酒水饮料', img: '/static/images/drink.jpg' },
            { id: 605, name: '滋补保健', img: '/static/images/health.jpg' },
            { id: 606, name: '方便速食', img: '/static/images/instant.jpg' }
          ]
        },
        {
          id: 7,
          name: '母婴玩具',
          children: [
            { id: 701, name: '奶粉', img: '/static/images/milk.jpg' },
            { id: 702, name: '尿裤湿巾', img: '/static/images/diaper.jpg' },
            { id: 703, name: '童车童床', img: '/static/images/stroller.jpg' },
            { id: 704, name: '玩具', img: '/static/images/toy.jpg' },
            { id: 705, name: '喂养用品', img: '/static/images/feed.jpg' },
            { id: 706, name: '洗护用品', img: '/static/images/baby-care.jpg' }
          ]
        },
        {
          id: 8,
          name: '运动户外',
          children: [
            { id: 801, name: '运动鞋服', img: '/static/images/sport-shoes.jpg' },
            { id: 802, name: '健身器材', img: '/static/images/fitness.jpg' },
            { id: 803, name: '户外装备', img: '/static/images/outdoor.jpg' },
            { id: 804, name: '体育用品', img: '/static/images/sports.jpg' },
            { id: 805, name: '骑行运动', img: '/static/images/cycling.jpg' },
            { id: 806, name: '游泳用品', img: '/static/images/swim.jpg' }
          ]
        }
      ]
    }
  },

  computed: {
    // 当前选中的一级分类对应的二级分类
    currentSubcategories() {
      return this.categories[this.currentCategory]?.children || []
    }
  },

  methods: {
    // 切换一级分类
    switchCategory(index) {
      this.currentCategory = index
    },

    // 点击二级分类
    goToSubcategory(item) {
      uni.navigateTo({
        url: `/pages/material/goods_list?id=${item.id}`
      })
    }
  }
}
</script>

<style scoped>
.category-container {
  display: flex;
  height: 100vh;
  background-color: #f8f8f8;
}

/* 左侧一级分类样式 */
.left-category {
  width: 200rpx;
  background-color: #f5f5f5;
}

.left-item {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #333;
  border-left: 6rpx solid transparent;
  transition: all 0.2s;
}

.left-item.active {
  background-color: #fff;
  color: #e93b3d;
  border-left-color: #e93b3d;
  font-weight: bold;
}

/* 右侧二级分类样式 */
.right-category {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

.subcategory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
}

.subcategory-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.subcategory-item:active {
  transform: scale(0.98);
}

.subcategory-img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.subcategory-name {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}
</style>